<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>表格</title>
    <style>
        table td {
            border: 1px solid black;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <button id="btn">添加一条新的访客信息</button>
    <table cellspacing="0" cellpadding="5">
        <tr>
            <td>序列号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </table>
    <script>
        var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];
        let table = document.querySelector("table")
        let btn = document.querySelector("#btn")
        let num = 0;
        let btn1;
        btn.onclick = function() {
            let tr = document.createElement("tr");
            tr.innerHTML = "<td>" + (num + 1) + "</td>" + "<td>" + info[num].name + "</td>" + "<td>" + info[num].age + "</td>" + "<td>" + "<button class='btn1'>删除</button>" + "</td>";
            table.appendChild(tr);
            num++;
            btn1 = document.getElementsByClassName('btn1');
            console.log(btn1)
            for (let i = 0; i < btn1.length; i++) {
                btn1[i].onclick = function() {
                    // btn1[i].parentNode.parentNode.remove();
                    this.parentNode.parentNode.remove();
                }
            }
        }
    </script>
</body>

</html>